<template>
    <a-card title="注册" style="margin: auto; width: 500px">
        <a-form
            :model="formState"
            ref="formRef"
            name="reg"
            :rules="rules"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
        >
            <a-form-item
            has-feedback
                label="用户名"
                name="username"
            >
                <a-input v-model:value="formState.username" />
            </a-form-item>

            <a-form-item
            has-feedback
                label="密码"
                name="pwd"
            >
                <a-input-password v-model:value="formState.pwd" />
            </a-form-item>
            <a-form-item
            has-feedback
                label="密码"
                name="confirm"
            >
                <a-input-password v-model:value="formState.confirm" />
            </a-form-item>

            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                <a-button type="primary" html-type="submit">Submit</a-button>
            </a-form-item>
        </a-form>
    </a-card>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
const router = useRouter();
const formRef = ref(null);
const formState = reactive({
    username: "",
    pwd: "",
    confirm: "",
    remember: true,
});

let validatePass = async (_rule, value) => {
    if (value === "") {
        return Promise.reject("请输入密码");
    } else {
        if (formState.confirm !== "") {
            formRef.value.validateFields("confirm");
        }

        return Promise.resolve();
    }
};

let validatePass2 = async (_rule, value) => {
    if (value === "") {
        return Promise.reject("请输入确认密码");
    } else if (value !== formState.pwd) {
        return Promise.reject("两次密码不一致");
    } else {
        return Promise.resolve();
    }
};

const rules = {
  username:[
    {
            required: true,
            trigger: "blur",
      },
      {
            pattern: /^\w{6,20}$/,
            message:"用户名格式不正确",
            trigger: "blur",
      },
  ],
    pwd: [
        {
            validator: validatePass,
            trigger: "blur",
        },
    ],
    confirm: [
        {
            validator: validatePass2,
            trigger: "blur",
        },
    ]
  
};
const onFinish = (values) => {
    router.push("/login");
    console.log("Success:", values);

};

const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
};
</script>

<style>
</style>